<template>
	<cl-crud ref="crud" @load="onLoad">
		<cl-pagefull>
			<template #head>
				<el-row type="flex">
					<cl-filter-group v-model="search">
						<cl-filter label="时间">
							<cl-date-picker
								v-model="search.date"
								type="daterange"
								range-separator="至"
								start-placeholder="开始日期"
								end-placeholder="结束日期"
								value-format="yyyy-MM-dd"
								style="width: 230px"
								:clearable="false"
								@change="refresh"
							/>
						</cl-filter>
						<cl-filter label="事业部">
							<cl-select
								v-model="search.biz_id"
								placeholder="请选择"
								filterable
								@change="changeBiz"
							>
								<el-option
									v-for="item in business"
									:key="item.biz_id"
									:label="item.biz_name"
									:value="item.biz_id"
								/>
							</cl-select>
						</cl-filter>
						<cl-filter label="分公司">
							<cl-select
								v-model="search.company_id"
								placeholder="请选择"
								clearable
								filterable
								@change="refresh"
							>
								<el-option label="全部" value="" />

								<el-option
									v-for="item in bizRefData.company"
									:key="item.company_id"
									:label="item.company_name"
									:value="item.company_id"
								/>
							</cl-select>
						</cl-filter>
						<cl-filter label="品牌">
							<cl-select
								v-model="search.bra_id"
								placeholder="全部"
								clearable
								filterable
								@change="refresh"
								multiple
								collapse-tags
							>
								<el-option
									v-for="item in bizRefData.brand"
									:key="item.bra_id"
									:label="item.bra_name"
									:value="item.bra_id"
								/>
							</cl-select>
						</cl-filter>
					</cl-filter-group>
					<cl-flex1 />
					<cl-table-handle
						:columns="initColumns"
						:print="printParams"
						v-model="table.columns"
						@export-file="exportExcel"
					/>
				</el-row>
			</template>

			<!-- 数据表格 -->
			<cl-table id="landReportChannel" v-bind="table">
				<cl-empty slot="empty" />
				<template #column-opt="{ scope: { row } }">
					<el-button type="primary" @click="summary(row)"> 汇总 </el-button>
				</template>
			</cl-table>
		</cl-pagefull>
	</cl-crud>
</template>

<script>
import dayjs from "dayjs";
import { exportExcel } from "@/utils/excel";
export default {
	name: "WideLandingReportChannel",
	inject: ["parent"],
	data() {
		return {
			printParams: {
				id: "landReportChannelChannel",
				popTitle: "账号报表"
			},
			// 表格配置
			table: {
				"context-menu": ["refresh"],
				columns: [],
				props: {
					showSummary: true,
					summaryMethod: this.getSummaries
				}
			},
			initColumns: [
				{ type: "index", label: "名称", width: 50, disable: true, fixed: true },
				{
					label: "渠道ID",
					prop: "channel_name",
					minWidth: 120,
					align: "left",
					showOverflowTooltip: true
				},
				{ label: "点击数", prop: "statistics_num", width: 120 },
				{ label: "行为数", prop: "behavior_num", width: 120 },
				{ label: "行为率", prop: "behavior_rate", width: 120 },
				{ label: "绑定客服加微数", prop: "bind_num", width: 120 },
				{ label: "绑定客服加微率", prop: "bind_add_rate", width: 120 },
				{ label: "所有加微数", prop: "number", width: 120 },
				{ label: "所有加微率", prop: "add_wei_rate", width: 120 },
				{ label: "定金数", prop: "deposit", width: 120 },
				{ label: "到店项目数", prop: "achieve_num", width: 120 },
				{ label: "业绩(￥)", prop: "achievement", width: 120 },
				{ label: "操作", prop: "opt", width: 100, disable: true, fixed: "right" }
			],
			search: {
				biz_id: "",
				company_id: "",
				bra_id: [],
				date: [dayjs().format("YYYY-MM-DD"), dayjs().format("YYYY-MM-DD")]
			},
			brandList: [],
			companyList: []
		};
	},
	computed: {
		bizRefData() {
			let { biz_id } = this.search;
			return this.getBizRefData(biz_id);
		}
	},
	created() {
		const { initColumns } = this;
		this.search.biz_id = this.getCurrBiz();
		this.table.columns = initColumns;
		this.init();
	},
	methods: {
		onLoad({ ctx, app }) {
			ctx.service(this.$service.ad)
				.set("dict", {
					api: {
						page: "channelList"
					}
				})
				.done();
			app.refresh(this.search);
		},
		// crud刷新
		refresh() {
			this.$refs.crud.refresh({ page: 1, ...this.search });
		},
		changeBiz() {
			this.search.bra_id = [];
			this.search.company_id = "";

			this.init();
			this.refresh();
		},
		async init() {
			const { biz_id } = this.search;
			this.getBizRefCompany(biz_id);
			this.getBizRefBrand(biz_id);
		},
		// 导出
		exportExcel() {
			exportExcel("#landReportChannel");
		},
		// 汇总
		summary(row = {}) {
			const { biz_id } = this.search;
			this.parent.openStatistics({ ...row, biz_id });
		},
		// 表格合计
		getSummaries({ columns, data }) {
			let statistics_num = 0;
			let behavior_num = 0;
			let wx_num = 0;
			let bind_num = 0;
			let ignore = ["channel_name", "opt"];
			return columns.map((column, index) => {
				let prop = column.property;
				if (index === 0) {
					return "合计";
				}
				if (ignore.includes(prop)) return "";
				if (prop == "behavior_rate") {
					return this.toFixed(behavior_num / statistics_num) + "%";
				}
				if (prop == "bind_add_rate") {
					return this.toFixed(bind_num / behavior_num) + "%";
				}
				if (prop == "add_wei_rate") {
					return this.toFixed(wx_num / behavior_num) + "%";
				}
				const values = data.map(item => Number(item[prop]));
				let sum = this.toFixed(
					values.reduce((prev, curr) => {
						const value = Number(curr);
						if (!isNaN(value)) {
							return prev + curr;
						}
						return prev;
					}, 0)
				);
				if (prop == "statistics_num") {
					statistics_num = sum;
				}
				if (prop == "behavior_num") {
					behavior_num = sum;
				}
				if (prop == "bind_num") {
					bind_num = sum;
				}
				if (prop == "number") {
					wx_num = sum;
				}
				return this.toFixed(sum);
			});
		}
	}
};
</script>

<style lang="scss" scoped></style>
